import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { FirstHeaderC, TableC } from '../../../comps';
import uuid from 'es6-uuid';
import { Tooltip } from 'antd';
import styles from './index.less';
class UnusualInfoC extends PureComponent {
  constructor() {
    super();
    this.state = {
      columnsProductNum: [
        //产品数量
        { key: 'tenantName', title: '租户' },
        { key: 'productNum', title: 'MAAT产品数', type: 'number' },
        { key: 'valueProductNum', title: '估值产品数', type: 'number' },
        { key: 'difference', title: '差值', type: 'number' },
        {
          key: 'differenceCodes',
          title: '差值产品code',
          width: 200,
          render: (text) => {
            if ((text ?? '--') == '--') return '--';
            return (
              <Tooltip title={<div className={styles.tip}>{text || '--'}</div>}>
                {' '}
                <span style={{ display: 'inline-block', width: '170px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{text || '--'}</span>
              </Tooltip>
            );
          },
        },
      ],
      columnsProductScale: [
        //产品规模
        { key: 'tenantName', title: '租户' },
        {
          key: 'productCodes',
          title: '无净值的产品代码',
          render: (text) => {
            if ((text ?? '--') == '--') return '--';
            return (
              <Tooltip title={<div className={styles.tip}>{text || '--'}</div>}>
                {' '}
                <span style={{ display: 'inline-block', width: '364px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{text || '--'}</span>
              </Tooltip>
            );
          },
        },
      ],
      columnsTrade: [
        //交易数量
        { key: 'tenantName', title: '租户' },
        { key: 'orderNum', title: '指令数量', type: 'number' },
        { key: 'bookNum', title: '簿记数量', type: 'number' },
        { key: 'recordNum', title: '估值流水数量', type: 'number' },
        { key: 'difference', title: '差值', type: 'number', width: 200 },
      ],
    };
  }
  componentDidMount() {}

  render() {
    const { columnsProductNum, columnsProductScale, columnsTrade } = this.state;
    const { productNumList = [], productScaleList = [], tradeList = [] } = this.props.unusualInfo;
    return (
      <div>
        <FirstHeaderC title='产品数量' />
        <div style={{ marginBottom: '19px' }}>
          <TableC
            columns={columnsProductNum}
            dataSource={productNumList?.map((item) => {
              item.key = uuid(16);
              return item;
            })}
            rowKey='key'
            hidePage={true}
            scroll={{ y: 120 }}
          />
        </div>
        <FirstHeaderC title='产品规模' />
        <div style={{ marginBottom: '19px' }}>
          <TableC
            columns={columnsProductScale}
            dataSource={productScaleList?.map((item) => {
              item.key = uuid(16);
              return item;
            })}
            rowKey='key'
            hidePage={true}
            scroll={{ y: 200 }}
          />
        </div>
        <FirstHeaderC title='交易数量' />
        <div>
          <TableC
            columns={columnsTrade}
            dataSource={tradeList?.map((item) => {
              item.key = uuid(16);
              return item;
            })}
            rowKey='key'
            hidePage={true}
            scroll={{ y: 120 }}
          />
        </div>
      </div>
    );
  }
}
export default connect(({ operationOverallM }) => ({
  operationOverallM,
}))(UnusualInfoC);
